<template>
  <!-- 表格内容 card -->
  <div id="protable">
    <el-card class="search">
      <tableHeaderTop
        shai_xuan="true"
        userName="true"
        gender="true"
        status="true"
        userId="true"
        tree-tbale="true"
      ></tableHeaderTop>
    </el-card>

    <!-- 表格 -->
    <el-card>
      <el-table :data="useTreeTable.tableList" border>
        <el-table-column :type="props.selection" width="55" fixed="left" v-if="props.selection === 'selection'" />
        <el-table-column type="index" width="55" fixed="left" label="序号" />
        <template v-for="item in tableColumns" :key="item">
          <el-table-column
            v-bind="item"
            :align="item.align ?? 'center'"
            :reserve-selection="item.type == 'index'"
            v-slot="scope"
          >
            <template v-if="item.prop === 'gender'">
              <slot name="gender" :row="scope.row"></slot>
            </template>
            <template v-if="item.tag">
              <slot name="status" :row="scope.row"></slot>
            </template>
          </el-table-column>
        </template>
        <el-table-column v-slot="scope" label="操作" v-if="itemRow" v-bind="itemRow" width="320">
          <slot name="operation" :row="scope.row"></slot>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="protable">
// protable
//-----------------------------------------------------------------------------
import type { ElTable, TableV2Props } from 'element-plus'
import useStore from '@/stores'
const { useTreeTable } = useStore()
//-----------------------------------------------------------------------------
// 接受父组件参数，配置默认值,方式一
// 接受父组件参数，配置默认值,方式二
//
interface propsType extends Partial<Omit<TableV2Props, 'data'>> {
  columns: any // 列配置项
  selection: 'selection' | 'index'
}
const props = withDefaults(defineProps<propsType>(), {
  columns: () => [],
  selection: 'index'
})

//-----------------------------------------------------------------------------

// 接收 columns 并设置为响应式
const tableColumns = ref<any>(props.columns)

// 循环的每一项,得出的每一项的数据给操作按钮
const itemRow = () => {
  tableColumns.value.map((item: any) => {
    if (item.type === 'operation') {
      return item
    }
  })
}

//-----------------------------------------------------------------------------
</script>

<style lang="scss" scoped>
#protable {
  .search {
    margin-bottom: 10px;
  }
}
</style>
